<script setup lang="ts">
import NarBar from '@renderer/components/NarBar.vue'
import Card from '@renderer/components/Card.vue'
import FrameSizeSet from '@renderer/components/FrameSizeSet.vue'
import userConfigStore from '@renderer/store/userConfigStore'

const { config } = userConfigStore()
const selectDirectory = async () => {
  const directory = await window.api.selectDirectory()
  if (directory) config.videoSaveDirectory = directory
}
</script>

<template>
  <NarBar />
  <main class="">
    <Card title="分辨率">
      <FrameSizeSet
        type="size"
        placeholder="分辨率设置"
        tip="请输入如：1980x1080的格式"
        buttonStyle="primary"
      />
    </Card>
    <Card title="帧数">
      <FrameSizeSet
        type="frame"
        placeholder="帧数设置"
        tip="请设置如：24的格式"
        buttonStyle="success"
      />
    </Card>
    <Card title="视频保存目录">
      <div class="flex gap-1">
        <el-input v-model="config.videoSaveDirectory" size="default" disabled />
        <el-button type="danger" size="default" @click="selectDirectory">选择</el-button>
      </div>
      <!-- <el-input v-model="" :placeholder="" size="normal" /> -->
    </Card>
  </main>
</template>

<style lang="less" scoped>
section {
  @apply bg-white m-3 p-3 rounded-lg;
  h2 {
    @apple text-slate-700 text-sm mb-2 opacity-80;
  }
}
</style>
